import React, {Component} from 'react'
import {mdiArrowLeft} from '@mdi/js'
import {COLORS} from '../color'
import ButtonIcon from '../icon/ButtonIcon'

export interface CardHeaderProps extends React.HTMLAttributes<HTMLElement> {
  className?: string
  onClickBack?: (evt?: any) => void
  isButtonBack?: boolean
  isPaddingForButton?: boolean
}

class CardHeader extends Component<CardHeaderProps> {
  render(): React.ReactNode {
    const {className, onClickBack, isButtonBack, isPaddingForButton} = this.props
    return (
      <div
        className={
          'card-header px-x4 ' + (isPaddingForButton ? 'py-x3 ' : 'py-x4 ') + (className || '')
        }>
        {isButtonBack && (
          <ButtonIcon
            iconPath={mdiArrowLeft}
            color={COLORS.gray600}
            size={'md'}
            title={'Назад'}
            className={'mr-x2'}
            onClick={onClickBack}
          />
        )}
        {this.props.children}
      </div>
    )
  }
}

export default CardHeader
